// 使用登记
<template>
    <f7-page
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
        class="common-page"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>使用登记</f7-nav-title>
            <f7-nav-right></f7-nav-right>
            <!-- 查询参数图标 -->
            <!-- <f7-nav-right @click.native="showSearch = true">
                <img
                    src="../../../../assets/img/qzjx/filter.png"
                    alt="toolbar-icon"
                    style="width: 22px"
                />
            </f7-nav-right> -->
        </f7-navbar>
        <f7-list media-list class="search-list" v-if="query.data.length > 0">
            <li
                v-for="(item, index) in query.data"
                :key="index"
                @click="detail(item)"
                class="content-box"
            >
                <img
                    :src="
                        require(`../../../../assets/img/qzjx/${
                            item.equipmentType || 'empty'
                        }.png`)
                    "
                    alt=""
                    class="left-box"
                />
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ item.propertyCode || '--' }}
                        </h3>
                        <span style="color:#8995AC;font-size:14px;margin-left:5px;">【{{item.workSiteCode}}】</span>
                    </div>
                    <p>{{ item.engineeName || '--' }}</p>
                    <p>当前进度{{String(item.pstatus) | DictItem(controlData.eqmUseStatus)}}</p>
                    <p>
                        登记牌有效期：<span>{{
                            item.exipiredTime || '--'
                        }}</span>
                    </p>
                </div>
            </li>
        </f7-list>
        <v-empty v-else description="暂无数据" />
        <!-- 搜索 -->
        <v-popup-search
            v-model="showSearch"
            title="筛选"
            :searchData="searchData"
            @btn:click="searchBtn"
        ></v-popup-search>
        <!-- 搜索 end -->
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
import vPopupSearch from '@/libs/zjk/popup-search/qm-popup-search.vue'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: '/app/equipment/eqmUse/getListModel',
            query: '/app/equipment/eqmUse/query',
        }
    }
    onInit() {
        this.setSearch("propertyId", this.$f7route.query.propertyId, "list")
    }

    onBeforeQuery(type, conditions, params) {}

    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
            if (result.controlData.equipmentType) {
                this.$data.searchData[1].columns =
                    result.controlData.equipmentType
            }
            if (result.controlData.taskStatus) {
                result.controlData.taskStatus.forEach((element) => {
                    element.code = element.value
                    element.name = element.name
                })
                this.$data.searchData[2].columns = result.controlData.taskStatus
            }
        }
        return result
    }

    mixin() {
        return {
            components: {
                vPopupSearch,
            },
            data() {
                return {
                    search: {},
                    showSearch: false,
                    // 搜索的配置
                    searchData: [
                        {
                            type: 'input2',
                            key: 'propertyCode',
                            placeholder: '产权备案编号、工程名称',
                        },
                        {
                            type: 'checkbox',
                            key: 'equipmentType',
                            label: '设备类型',
                            columns: [],
                        },
                        {
                            type: 'checkbox',
                            key: 'repairStatus',
                            label: '办理进度',
                            columns: [
                                {
                                    code: '待进场',
                                    name: '待进场',
                                },
                                {
                                    code: '待审核',
                                    name: '待审核',
                                },
                                {
                                    code: '已完成',
                                    name: '已完成',
                                },
                            ],
                        },
                        {
                            type: 'date-range',
                            label: '维保日期',
                            key: 'timeOfWarehousing',
                        },
                    ],
                    activeIndex: 1,
                }
            },
            methods: {
                showTime1(date) {
                    if (date) {
                        return formatter.formatDate(date, 'yyyy-MM-dd')
                    } else {
                        return '--'
                    }
                },
                changeStatus() {
                    if (this.activeIndex == 1) {
                        this.searchQuery(this.search, 'list')
                    } else {
                        this.searchQuery(this.search, 'list$1')
                    }
                },
                searchBtn({ data }) {
                    if (data.timeOfWarehousing) {
                        let arr = data.timeOfWarehousing.split(',')
                        data.beginTime = arr[0]
                        data.endTime = arr[1]
                    } else {
                        data.beginTime = ''
                        data.endTime = ''
                    }
                    Object.assign(this.search, data)
                    if (this.activeIndex == 1) {
                        this.searchQuery(this.search, 'list')
                    } else {
                        this.searchQuery(this.search, 'list$1')
                    }
                },
                // 详情
                detail(item) {
                    this.getWorkflowArgs({
                        formId: item.caseId,
                    }).then((rlt) => {
                        let url = ''
                        rlt.appUrl = '/business/qzjx/eqmUse/view'
                        if (rlt.taskId) {
                            url = `${rlt.appUrl}?action=processEdit&taskId=${
                                rlt.taskId
                            }&assigneeId=${rlt.assigneeId}&appCode=${
                                rlt.appCode
                            }&version=${rlt.version}&_r=${new Date().getTime()}`
                        } else if (rlt.historyTaskId) {
                            url = `${
                                rlt.appUrl
                            }?action=processView&historyTaskId=${
                                rlt.historyTaskId
                            }&appCode=${rlt.appCode}&version=${
                                rlt.version
                            }&_r=${new Date().getTime()}&assigneeId=${
                                rlt.assigneeId
                            }`
                        } else {
                            this.$toast('无法获取应用的处理地址')
                        }
                        if (url) {
                            this.$f7router.navigate(url)
                        }
                    })
                },
            },
            mounted() {},
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');

.common-page @{deep}.van-tabs {
    .van-tabs__wrap {
        width: 100%;
        z-index: 99;
    }

    .van-tabs__line {
        width: 40px;
    }
}

.submit-btn {
    flex: 1;
    margin: 0 10px;
    border-radius: 24px;
}
.content-box .right-box .title-box{
    justify-content: flex-start;
}
</style>
